<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>从白天到黑夜</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="../../src/earcut.js"></script>
     <!-- babylon GUI -->
    <script src="../../src/babylon.gui.min.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2.2, Math.PI / 2.2, 15, new BABYLON.Vector3(0, 0, 0));
            camera.upperBetaLimit = Math.PI / 2.2;
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
            light.intensity = 1;

            // GUI
            const adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

            const panel = new BABYLON.GUI.StackPanel();
            panel.width = "220px";
            panel.top = "-25px";
            panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
            adt.addControl(panel);

            const header = new BABYLON.GUI.TextBlock();
            header.text = "Night to Day";
            header.height = "30px";
            header.color = "white";
            panel.addControl(header);

            const slider = new BABYLON.GUI.Slider();
            slider.minimum = 0;
            slider.maximum = 1;
            slider.borderColor = "black";
            slider.color = "gray";
            slider.background = "white";
            slider.value = 1;
            slider.height = "20px";
            slider.width = "200px";
            slider.onValueChangedObservable.add((value) => {
                if (light) {
                    light.intensity = value;
                }
            });
            panel.addControl(slider);



            BABYLON.SceneLoader.ImportMeshAsync("", "../../src/models/", "lamp.babylon").then(() => {
                const lampLight = new BABYLON.SpotLight("lampLight", BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, -1, 0), 0.8 * Math.PI, 0.01, scene);
                lampLight.diffuse = BABYLON.Color3.Yellow();
                lampLight.parent = scene.getMeshByName("bulb")

                const lamp = scene.getMeshByName("lamp");
                lamp.position = new BABYLON.Vector3(2, 0, 2);
                lamp.rotation = BABYLON.Vector3.Zero();
                lamp.rotation.y = -Math.PI / 4;

                lamp3 = lamp.clone("lamp3");
                lamp3.position.z = -8;

                lamp1 = lamp.clone("lamp1");
                lamp1.position.x = -8;
                lamp1.position.z = 1.2;
                lamp1.rotation.y = Math.PI / 2;

                lamp2 = lamp1.clone("lamp2");
                lamp2.position.x = -2.7;
                lamp2.position.z = 0.8;
                lamp2.rotation.y = -Math.PI / 2;

            });

            //Skybox
            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
            const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../../src/imgs/skybox/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skybox.material = skyboxMaterial;

            BABYLON.SceneLoader.ImportMeshAsync("", "../../src/models/", "valleyvillage.glb").then(() => {
                scene.getMeshByName("ground").material.maxSimultaneousLights = 5;
            });

            return scene;

        }
        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>